
const echarts = require('echarts')
window.onload = async () => {
  renderSubject()
}
function renderSubject (arr) {
  const myChart = echarts.init(document.getElementById('line'))

  // 指定图表的配置项和数据
  const option = {
    title: [
      {
        text: '销售数据',
        textStyle: {
          fontSize: 16
        }
      },
      {
        text: '销售额趋势图',
        left: '43%',
        textStyle: {
          fontSize: 14
        }
      },
      {
        subtext: ' 单位：元',
        top: '15px',
        left: '45px'
      },
      {
        subtext: '2022-20-20~202051-51',
        top: '-8px',
        left: '75px'
      }
    ],
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        return "<div style='padding:5px 10px'>" + '销售额：' + params[0].value + '<br/>' + params[0].name + '</div>'
      }
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {}
      }
    },

    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} 元'
      },
      axisPointer: {
        snap: true
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      // prettier-ignore
      data: ['11月1日', '11月2日', '11月3日', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
    },
    visualMap: {
      show: false,
      dimension: 0,
      pieces: [
        {
          lte: 6,
          color: '#ff5757'
        },
        {
          gt: 6,
          lte: 17,
          color: '#ff5757'
        },
        {
          gt: 17,
          color: '#ff5757'
        }
      ]
    },
    series: [
      {
        name: 'Electricity',
        type: 'line',
        smooth: true,
        lineStyle: {
          width: 4
        },
        symbolSize: 8,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(255, 95, 95, .5)' // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: '#fff' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        // prettier-ignore
        data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
        markArea: {
          itemStyle: {
            color: 'rgba(255, 173, 177, 0.4)'
          }
        }
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}
